<div class="row">
  <x-button (click)="customTable()">Custome table</x-button>
  <x-dialog title="table" width="80%" height="80%" [(visible)]="visibleTable">
    <table class="custom-table">
      <tr>
        <th>user</th>
        <th>email</th>
        <th>state</th>
      </tr>
      <tr>
        <td>admin</td>
        <td>admin@admin.com</td>
        <td>enabled</td>
      </tr>
      <tr>
        <td>john</td>
        <td>john@john.com</td>
        <td>disabled</td>
      </tr>
      <tr>
        <td>jack</td>
        <td>jack@jack.com</td>
        <td>enabled</td>
      </tr>
    </table>
  </x-dialog>
</div>

<div class="row">
  <x-button (click)="customForm()">Custom form</x-button>
  <x-dialog title="form" [(visible)]="visibleForm" buttonsCenter>
    <ul class="custom-form">
      <li><x-input label="user" direction="row"></x-input></li>
      <li><x-input label="email" direction="row"></x-input></li>
      <li><x-radio [data]="['enabled', 'disabled']" [ngModel]="'enabled'"></x-radio></li>
    </ul>
  </x-dialog>
</div>

<div class="row">
  <x-button (click)="custom()">Custom title and bottom button</x-button>
  <x-dialog [title]="titleTpl" [footer]="footerTpl" [(visible)]="visibleCustom">
    <span>The more you learn, the more you don't know.</span>
    <ng-template #titleTpl>
      <x-icon type="fto-user"></x-icon>
    </ng-template>
    <ng-template #footerTpl>
      <div class="custom-footer">
        <x-link type="success" (click)="customClose()">I know</x-link>
      </div>
    </ng-template>
  </x-dialog>
</div>
